1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
import { Button } from "@/components/ui/button";
import { Link } from "waku";
import { getContextData } from "waku/middleware/context";
import type { PageProps } from "waku/router";
import db from "@/lib/db";
import { Progress } from "@/components/ui/progress";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
const flags: Record<string, string> = {
th: "🇹🇭",
en: "🇬🇧",
zh: "🇨🇳",
ja: "🇯🇵",
es: "🇪🇸",
fr: "🇫🇷",
};
export default async function HomePage(props: PageProps<"/lang/[slug]">) {
const lessons = await getData(props.slug);
const { user } = getContextData();
function commit() {}
return (
<>
<section>
<h2 className="text-lg">Thai!</h2>
{lessons.map((l) => (
<Link key={l.id} to={`/lesson/${l.id}`}>
<Card>
<CardHeader>
<CardTitle>
<h3>{l.name}</h3>
</CardTitle>
<CardDescription>
<p>{l.description}</p>
</CardDescription>
</CardHeader>
<CardContent>
<Progress value={(l.position / l.count) * 100} />
</CardContent>
</Card>
</Link>
))}
</section>
</>
);
}
const getData = async (lang: string) => {
const lessons = db.fetchLanguage(lang);
return lessons;
};
export const getConfig = async () => {
return {
render: "dynamic",
} as const;
};
async function LanguageItem({ lang }: { lang: string }) {
return (
<div className="flex">
<div className="text-lg">{flags[lang] || ""}</div>
</div>
);
}
|
